<template>
	<view class="container">
		<!-- 顶部轮播 -->
		<view class="top-box">
			<swiper class="swiper">
				<swiper-item class="swiper-item">
					<view class="img-box">
						<image :src="banner" ></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 套餐详情 -->
		<view class="content">
			<view class="combo-box" v-for="(item,index) in mealData" :key="item.id" @click="open(item.id)">
				<view class="picture">
					<image :src="item.image" ></image>
				</view>
				<view class="high">
					<view class="text">{{item.name}}</view>
					<view class="price">￥{{item.price}}</view>
				</view>
			</view>
		</view>
		<u-modal v-model="show" :content="content" :show-cancel-button="true" :mask-close-able="true" @confirm="sureBtn"></u-modal>
	</view>
</template>

<script>
	import {mealList,sureBuy} from "../../../api/meal.js"
	import {vipbanner} from "../../../api/product.js"
	export default{
		data(){
			return{
				mealData:[],
				show: false,
				content: '确定购买该套餐？',
				tId:null ,//套餐id
				banner:""
			}
		},
		onLoad() {
			this.getData()
			this.getBanner()
		},
		methods:{
			async getBanner(){
				let res=await this.get(vipbanner)
				this.banner=res.data.image
			},
			getData(){
				this.get(mealList,{
					user_id:uni.getStorageSync("userInfo").id
				}).then(res => {
					console.log(res)
					if(res.code == 1){
						this.mealData = res.data.data
					}
				})
			},
			open(val){
				// this.show = true
				// this.tId = val
				uni.navigateTo({
					url:"./combocon?id="+val
				})
			},
			sureBtn(){
				this.post(sureBuy,{
					user_id:uni.getStorageSync("userInfo").id,
					hgid:this.tId
				}).then(res => {
					this.msg("激活成功")
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				})
			}
		},
		
	}
</script>

<style>
	page{
		background: #F6F6F6;
	}
	.content{
		width: 690rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.container{
		padding: 0 30rpx;
	}
	.top-box{
		width: 690rpx;
		height: 404rpx;
		background: rgba(0, 0, 0, 0);
		border-radius: 12rpx;
		margin: 48rpx auto 10rpx;
	}
	.swiper{
		height: 404rpx;
	}
	.swiper-item{
		height: 404rpx;
	}
	.img-box{
		width: 690rpx;
		height: 404rpx;
	}
	.img-box>image{
		width: 690rpx;
		height: 404rpx;
		overflow: hidden;
	}
	.combo-box{
		width: 330rpx;
		height: 420rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 30rpx;

	}
	.picture{
		width: 330rpx;
		height: 310rpx;
	}
		
	.picture>image{
		width: 330rpx;
		height: 310rpx;
		/* overflow: hidden; */
	}
	.high{
		height: 110rpx;
		width: 330rpx;
		padding-left: 20rpx;
	}
	.text{
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 14rpx;
	}
	.price{
		font-size: 28rpx;
		font-weight: bold;
		color: #06923D;
		margin-top: 14rpx;
	}
</style>
